<!-- 主侧边栏容器 -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- 品牌 Logo -->
    <a href="javascript:;" class="brand-link">
        <img src="/static/images/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
             style="opacity: .8">
        <span class="brand-text font-weight-light">AdminLTE 3</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar" id="sidebar">
        <!-- 侧边栏用户面板（可选） -->
        <div class="user-panel mt-3 pb-3 mb-3 d-flex">
            <div class="image">
                <img src="/static/images/user2-160x160.jpg" class="img-circle elevation-2" alt="用户头像">
            </div>
            <div class="info">
                <a href="javascript:;" class="d-block">Alexander Pierce</a>
            </div>
        </div>

        <!-- 侧边栏菜单 -->
        <nav class="mt-2">
            <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                <!-- 使用 .nav-icon 类添加图标，
                     或使用 font-awesome 或其他任何图标字体库 -->
                <li class="nav-item has-treeview" v-for="first_sidebar in sidebar_list">
                    <a href="javascript:;" class="nav-link">
                        <i class="icon ion-navicon-round"></i>
                        <p>
                            &nbsp;&nbsp;@{{ first_sidebar.name }}
                            <i class="right icon ion-arrow-left-c"></i>
                        </p>
                    </a>
                    <ul class="nav nav-treeview" v-for="second_sidebar in first_sidebar['items']">
                        <li class="nav-item">
                            <a :href="second_sidebar.url" class="nav-link">
                                <i class="icon ion-gear-b"></i>
                                <p>&nbsp;&nbsp;@{{ second_sidebar.name }}</p>
                            </a>
                        </li>
                        <!--
                        <li class="nav-item">
                            <a href="./index2.html" class="nav-link">
                                <i class="icon ion-gear-b"></i>
                                <p>仪表盘 v2</p>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="./index3.html" class="nav-link">
                                <i class="icon ion-gear-b"></i>
                                <p>仪表盘 v3</p>
                            </a>
                        </li>
                        -->
                    </ul>
                </li>
            </ul>
        </nav>
        <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
</aside>
<script type="text/javascript">
    $(function(){
        var sidebar_box = new Vue({
            el: "#sidebar",
            data: {
                routeUrl: '/' + "{{$identity}}",
                sidebar_list: "{{$sidebar}}",
            },
            created: function() {
                this.sidebar_list = JSON.parse(this.sidebar_list.replace(/&quot;/g,"\""));
            },
            mounted: function() {
                this.initialPage();
            },
            methods: {
                // 初始化页面
                initialPage: function () {
                    /// 父标签进行打开状态
                    $('a[href="'+ this.routeUrl +'"]').parent().parent().parent().addClass('menu-open')
                    // 二级菜单选中状态
                    $('a[href="'+ this.routeUrl +'"]').addClass('active');
                }
            }
        });
    });
</script>
